import { StyleSheet, Text, View, ImageBackground, Pressable } from 'react-native';
import React from 'react';
import { useTranslation } from 'react-i18next';
import Icon from 'react-native-vector-icons/Ionicons';
import { useNavigation } from '@react-navigation/native';
import { FocusAwareStatusBar } from '~/components';
import { px2dp, scale, width } from '~/utils/px2dp';
import i18n from '~/i18n/languages';
import { appStore, observer } from '~/store';

export default observer(() => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    const switchLanguage = () => {
        const language = i18n.language === 'zh' ? 'en' : 'zh';
        appStore.switchLanguage(language);
    };
    return (
        <View style={styles.container}>
            <FocusAwareStatusBar translucent={true} />
            <ImageBackground style={styles.bg} source={require('~/assets/login/bg5.jpg')}>
                <Pressable style={styles.language} onPress={switchLanguage}>
                    <Icon name={'language-outline'} size={px2dp(60)} color={'#fff'}></Icon>
                </Pressable>
                <Text style={styles.t1}>WRISTECH</Text>
                <Text style={[styles.t1, { marginTop: px2dp(12) }]}>CONNECT</Text>
                <View style={{ marginTop: px2dp(100) }}>
                    <Pressable
                        style={[styles.bt, { backgroundColor: '#fff' }]}
                        onPress={() => navigation.navigate('LoginByEmail')}>
                        <Text style={styles.bt_text}>{t('Introduction.t1')}</Text>
                    </Pressable>
                    <Pressable style={[styles.bt, styles.bt1]} onPress={() => navigation.navigate('BuyMall')}>
                        <Text style={styles.bt_text1}>{t('Introduction.t2')}</Text>
                    </Pressable>
                </View>
                {/* <Pressable style={{ marginTop: px2dp(32) }}>
                    <Text style={styles.t3}>{t('Introduction.t3')}</Text>
                </Pressable> */}
            </ImageBackground>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    bg: {
        flex: 1,
        justifyContent: 'flex-end',
        paddingBottom: '14%',
    },
    t1: {
        color: '#fff',
        fontSize: scale(40),
        fontWeight: 'bold',
        letterSpacing: 2,
        textAlign: 'center',
    },
    bt: {
        width: width - px2dp(48),
        alignSelf: 'center',
        justifyContent: 'center',
        alignItems: 'center',
        height: px2dp(96),
        borderRadius: px2dp(40),
        marginBottom: px2dp(32),
    },
    bt_text: {
        color: '#1A1A1A',
        fontSize: scale(28),
        fontWeight: 'bold',
    },
    bt1: {
        borderWidth: 1,
        borderColor: '#626669',
    },
    bt_text1: {
        color: '#fff',
        fontSize: scale(28),
        fontWeight: 'bold',
    },
    t3: {
        color: 'rgba(255, 255, 255, 0.72)',
        fontSize: scale(26),
        textAlign: 'center',
    },
    language: {
        position: 'absolute',
        top: '7%',
        right: px2dp(32),
    },
});
